<template>
  <div>
    <span>
      用户名：
      <input type="text" v-model.lazy="name">
    </span>
    <span>{{tip}}</span>
  </div>
</template>

<script>
  import { setup, ref, watch } from "vue";
  export default {
    setup() {
      const name = ref("")
      const tip = ref("")

      watch(name,(newValue,oldValue)=>{
        console.log(`旧值是：${oldValue},新值是：${newValue}`);

        setTimeout(function(){
          if (newValue =="admin") {
            tip.value = "用户名已经存在，请更换一个";
          }else{
            tip.value = "用户名可以使用";
          }
        },1000)
      });
      return{
        name,
        tip
      };
    }
  };

</script>